<!--
 * @Author: your name
 * @Date: 2020-10-22 14:10:28
 * @LastEditTime: 2021-02-22 16:02:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\sunglasses\index.vue
-->
<template>
  <div class="progressive w1200auto">
    <bread-crumb class="mb10" :breadcrumbTtem="breadcrumbTtem"/>
    <banner :bannerImg="require('~/assets/image/progressive/progressive_1.png')">
      <template v-slot:txt>
        <article class="absolute banner_progressiveGlasses text_l article">
          <h1 class="size24 lh14 b">{{$t('Progressive glasses')}}</h1>
          <p class="size16 lh14 mb30 b">{{$t("Close range search for that 'sweet spot' of clear vision")}}</p>
          <p class="size16 lh14 b">{{$t("Progressive lenses are the closest to how natural vision is that")}}</p>
          <p class="size16 lh14 b">{{$t("you can get in a pair of prescription eyeglasses.")}}</p>
          <p class="size16 lh14 b">{{$t("They are more than just a defined near and distance correction in one lens.")}}</p>
          <p class="size16 lh14 b">{{$t("Rather, progressives provide a smooth transition from distance through intermediate to near, ")}}</p>
          <p class="size16 lh14 b">{{$t("with all the in-between corrections included as well. ")}}</p>
          <p class="size16 lh14 b">{{$t("This constant graduation of the prescription means that you can look up to see in the distance, ")}}</p>
          <p class="size16 lh14 b">{{$t("look ahead to view your computer in the intermediate zone, ")}}</p>
          <p class="size16 lh14 mb40 b">{{$t("and drop your gaze downward to read and do fine work comfortably close up.")}}</p>
          <p class="size16 lh14 b">{{$t("You can choose the suitable frame style , ")}}</p>
          <p class="size16 lh14 b">{{$t("when choosing your lens type, select 'Progressive No Line.'")}}</p>
        </article>
      </template>
    </banner>
    <filter-item :optionData="optionData" @checkedOptions="checkedOptions" class="filter-item"/>
    <product-list :productData="productData" @loadMoreData="loadMoreData" class="mb50"/>
  </div>
</template>

<script>
import ProductList from '~/components/common/ProductList';
import BreadCrumb from '~/components/common/Breadcrumb';
import Banner from '~/components/common/Banner';
import FilterItem from '~/components/common/FilterItem';
import { spliteParams } from '~/utils/Utils';
export default {
  name: 'progressiveglasses',
  async asyncData({req, params, query, route}) {
    let arr = await spliteParams(route.fullPath);
    return {
      productData:[
        {
          id: 1,
          baseUrl: require('~/assets/image/1_7.jpg'),
          imgs: [
            { url: require('~/assets/image/1_7.jpg') },
            { url: require('~/assets/image/1_1__1.jpeg') },
            { url: require('~/assets/image/1_1__1_1.jpeg') },
          ],
          finalPrice: '89',
          name: 'FANKEN',
          price: '89',
          options: [
            {
              id: '1',
              img: require('~/assets/image/8051-1.png'),
              title: 'blank'
            },
            {
              id: '2',
              img: require('~/assets/image/8051-2.png'),
              title: 'gray'
            },
            {
              id: '3',
              img: require('~/assets/image/8051-3.png'),
              title: 'white'
            },
          ]
        },
        {
          id: 2,
          imgs: [
            { url: require('~/assets/image/1_1_.jpg') },
            { url: require('~/assets/image/1_1__1.jpeg') },
            { url: require('~/assets/image/1_1__1_1.jpeg') },
          ],
          finalPrice: '89',
          name: 'FANKEN',
          price: '89',
          options: [
            {
              id: '1',
              img: require('~/assets/image/8051-1.png'),
              title: 'blank'
            },
            {
              id: '2',
              img: require('~/assets/image/8051-2.png'),
              title: 'gray'
            },
            {
              id: '3',
              img: require('~/assets/image/8051-3.png'),
              title: 'white'
            },
          ]
        },
        {
          id: 3,
          imgs: [
            { url: require('~/assets/image/1_1_.jpg') },
            { url: require('~/assets/image/1_1__1.jpeg') },
            { url: require('~/assets/image/1_1__1_1.jpeg') },
          ],
          finalPrice: '89',
          name: 'FANKEN',
          price: '89',
          options: [
            {
              id: '1',
              img: require('~/assets/image/8051-1.png'),
              title: 'blank'
            },
            {
              id: '2',
              img: require('~/assets/image/8051-2.png'),
              title: 'gray'
            },
            {
              id: '3',
              img: require('~/assets/image/8051-3.png'),
              title: 'white'
            },
          ]
        },
        {
          id: 4,
          imgs: [
            { url: require('~/assets/image/1_1_.jpg') },
            { url: require('~/assets/image/1_1__1.jpeg') },
            { url: require('~/assets/image/1_1__1_1.jpeg') },
          ],
          finalPrice: '89',
          name: 'FANKEN',
          price: '89',
          options: [
            {
              id: '1',
              img: require('~/assets/image/8051-1.png'),
              title: 'blank'
            },
            {
              id: '2',
              img: require('~/assets/image/8051-2.png'),
              title: 'gray'
            },
            {
              id: '3',
              img: require('~/assets/image/8051-3.png'),
              title: 'white'
            },
          ]
        }
      ],
      optionData: [
        {
        code: "custom_color",
        label: "Color",
        options: [
            {
            id: "84",
            label: "Black",
            src: "/media/wysiwyg/color-images/Black.png",
            },
            {
            id: "85",
            label: "Gray",
            src: "/media/wysiwyg/color-images/Gray.png",
            },
            {
            id: "86",
            label: "Orange",
            src: "/media/wysiwyg/color-images/Orange.png",
            },
        ],
        },
        {
        code: "gender",
        label: "Gender",
        options: [
            {
            label: "Men",
            src: "/media/wysiwyg/color-images/Men.png",
            id: "53",
            },
            {
            id: "54",
            label: "Women",
            src: "/media/wysiwyg/color-images/Women.png",
            },
        ],
        },
        {
        code: "material",
        label: "Material",
        options: [{
            id: "52",
            label: "Metal",
            src: "/media/wysiwyg/color-images/Metal.png"
        }]
        },
        {
        code: "shape",
        label: "Shape",
        options: [
            {
            id: "71",
            label: "Cat eye",
            src: "/media/wysiwyg/color-images/Cat eye.png"
            },
            {
            id: "69",
            label: "Rectangle",
            src: "/media/wysiwyg/color-images/Rectangle.png"
            },
            {
            id: "70",
            label: "Round",
            src: "/media/wysiwyg/color-images/Round.png"
            }
        ]
        },
        {
        code: "fit",
        label: "Fit",
        options: [{
            id: "73",
            label: "Medium",
            src: "/media/wysiwyg/color-images/Medium.png"
        }]
        },
        {
        code: "feature",
        label: "Feature",
        options: [
            {
            id: "82",
            label: "Lightweight",
            src: "/media/wysiwyg/color-images/Lightweight.png"
            }
        ]
        }
      ],
      breadcrumbTtem: arr || []
    }
  },
  components: {
    ProductList,
    BreadCrumb,
    Banner,
    FilterItem
  },
  watch: {
      $route(to, from) {
          if(to.fullPath !== from.fullPath) {
              this.breadcrumbTtem = spliteParams(to.fullPath);
          }
      }
  },
  methods: {
    checkedOptions (option) {
      console.log('option :>> ', option);
    }
    ,loadMoreData(curPage) {
      console.log('curPage :>> ', curPage);
    }
  }
}
</script>

<style lang="scss" scoped>
// @import "~/assets/scss/index.scss";
	.banner_progressiveGlasses {
		right: 40px;
		top: 40px;
	}
</style>